<!--客户信息 增加 修改-->
<template>
    <el-card class="box-card" :body-style="getBodyStyle()">
        <div slot="header" class="clearfix">
            <span style="line-height: 36px;">客户信息</span>
            <el-button type="primary" style="float:right" v-if="type=='修改' || type=='沟通'" @click="onChange">修改</el-button>
            <el-button type="primary" style="float:right" v-else @click="onAdd">新增</el-button>
        </div>
        <el-form ref="form" :model="form" :inline="true" class="demo-form-inline">
           
           <el-row >
  <el-col :span="12">
      <el-form-item label="姓名" label-width="100px" :rules="{
                                                  required: true, message: '名称不能为空', trigger: 'blur'
                                                }" :prop="'CUSTOM_NAME'">
                <el-input v-model="form.CUSTOM_NAME"></el-input>
            </el-form-item>
  </el-col>
  <el-col :span="12">
      <el-form-item label="等级" label-width="100px">
                <el-select v-model="form.CUSTOM_LEVEL" placeholder="请选择等级">
                     <el-option label="一星" value="一星"></el-option>
                    <el-option label="二星" value="二星"></el-option>
                    <el-option label="三星" value="三星"></el-option>
                    <el-option label="四星" value="四星"></el-option>
                    <el-option label="五星" value="五星"></el-option>
                </el-select>
            </el-form-item>
  </el-col>
  
</el-row>
         <el-row >
  <el-col :span="12">
       <el-form-item label="国籍" label-width="100px">
                <el-input v-model="form.CUSTOM_COUNTRY"></el-input>
            </el-form-item>
  </el-col>
  <el-col :span="12">
      
            <el-form-item label="性别" label-width="100px">
                <el-select v-model="form.CUSTOM_SEX" placeholder="请选择活动区域">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
  </el-col>
  
</el-row> 
         <el-row >
  <el-col :span="12">
       <el-form-item label="留学国家" label-width="100px">
                <el-input v-model="form.CUSTOM_SCOUNTRY"></el-input>
            </el-form-item>
  </el-col>
  <el-col :span="12"> <el-form-item label="出生日期:" label-width="100px">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.CUSTOM_BIRTHDATE" style="width: 100%;"></el-date-picker>
            </el-form-item></el-col>
  
</el-row> 
         <el-row >
  <el-col :span="12"><el-form-item label="护照号码" label-width="100px">
                <el-input v-model="form.CUSTOM_PASSPORT"></el-input>
            </el-form-item></el-col>
  <el-col :span="12"> <el-form-item label="境内邮编" label-width="100px">
                <el-input v-model="form.CUSTOM_ZIP"></el-input>
            </el-form-item></el-col>
  
</el-row> 
         <el-row >
               <el-col :span="12"> <el-form-item label="联系电话" label-width="100px">
                <el-input v-model="form.CUSTOM_TEL"></el-input>
            </el-form-item></el-col>
  <el-col :span="12"> <el-form-item label="电子邮箱" label-width="100px">
                <el-input v-model="form.CUSTOM_EMAIL"></el-input>
            </el-form-item></el-col>
</el-row> 

       <el-row >
         <el-col v-show="type!='渠道新增'"> 
  <el-form-item label="所属渠道" label-width="100px"  >
                <el-input v-model="form.ORGANIZATION_NAME" :disabled="true"></el-input>
            </el-form-item>     
<el-button type="primary" @click="Choose">选择</el-button>   
         </el-col>
<el-col :span="12">
      <el-form-item label="推荐套餐" label-width="100px">
                <el-select v-model="form.CUSTOM_PRODUCE" placeholder="推荐套餐">
                     <el-option label="青铜安心计划" value="青铜安心计划"></el-option>
                                        <el-option label="青铜周祥计划" value="青铜周祥计划"></el-option>
                                        <el-option label="青铜畅游计划" value="青铜畅游计划"></el-option>
                                        <el-option label="白银安心计划" value="白银安心计划"></el-option>
                                        <el-option label="白银周祥计划" value="白银周祥计划"></el-option>
                                        <el-option label="白银畅游计划" value="白银畅游计划"></el-option>

                                        <el-option label="黄金安心计划" value="黄金安心计划"></el-option>
                                        <el-option label="黄金周祥计划" value="黄金周祥计划"></el-option>

                                        <el-option label="黄金畅游计划" value="黄金畅游计划"></el-option>
                                        <el-option label="铂金安心计划" value="铂金安心计划"></el-option>

                                        <el-option label="铂金周祥计划" value="铂金周祥计划"></el-option>
                                        <el-option label="铂金畅游计划" value="铂金畅游计划"></el-option>
                </el-select>
            </el-form-item>
  </el-col>   
  
  </el-row>
         <el-row >
              <el-col :span="12"> 
            <el-form-item label="境内常住地址" label-width="100px">
                <el-input v-model="form.CUSTOM_ADDRESS"></el-input>
            </el-form-item></el-col>
         </el-row>
         <el-row >
  <el-col :span="12"><el-form-item label="境外通讯地址" label-width="100px">
                <el-input v-model="form.CUSTOM_OADDRESS"></el-input>
            </el-form-item>
            </el-col>
  
  </el-row>
 
    <el-row >
         <el-col ><el-form-item label="留学目的地国家或地区教育机构名称:" label-width="280px">
                <el-input v-model="form.CUSTOM_SCHOOL" :disabled="true"></el-input>
            </el-form-item>
            <el-button type="primary" @click="ChooseSchool">选择</el-button>   
            </el-col>

    </el-row>
    
    <el-row >
         <el-form-item label="入学通知书或教育机构的申请确认编码:" label-width="280px">
                <el-input v-model="form.CUSTOM_CODE"></el-input>
            </el-form-item>
    </el-row>
        </el-form>
<el-dialog title="选择渠道" :modal="false" :visible.sync="selectOrganization" v-if="selectOrganization">
    <organization-selectList type="客户选择" @selectSuccess="selectSuccess">
    </organization-selectList>
</el-dialog>
<el-dialog title="选择学校" :modal="false" :visible.sync="SchoolShow" v-if="SchoolShow">
<school-select @SelctSchool="SelctSchool">
</school-select>
</el-dialog>
    </el-card>
</template>
<script>
import api from "@/js/api";
import getid from "@/js/getid";
import OrganizationSelectList from "@/components/Crm/OrganizationSelectList";
import SchoolSelect from "@/components/Crm/SchoolSelect";
export default {
  data() {
    return {
      selectOrganization: false,
      SchoolShow: false,
      OName: "", //渠道名称
      form: {
        CUSTOM_ID: "",
        CUSTOM_NAME: "",
        CUSTOM_LEVEL: "",
        CUSTOM_STATE: "",
        CUSTOM_SEX: "",
        CUSTOM_COUNTRY: "",
        CUSTOM_BIRTHDATE: "",
        CUSTOM_SCOUNTRY: "",
        CUSTOM_PASSPORT: "",
        CUSTOM_ZIP: "",
        CUSTOM_TEL: "",
        CUSTOM_SCHOOL: "",
        CUSTOM_EMAIL: "",
        CUSTOM_CODE: "",
        CUSTOM_OZIP: "",
        CUSTOM_ADDRESS: "",
        CUSTOM_OADDRESS: "",
        CUSTOM_PRODUCE: "",
        ORGANIZATION_ID: "",
        ADMIN_ID: "",
        ORGANIZATION_NAME: "",
        CUSTOM_ENDTIME: "",
        CUSTOM_ADDTIME: "",
        ORGANIZATION: [],
        CUSTOM_SCHOOLID: ""
      }
    };
  },
  components: {
    "organization-selectList": OrganizationSelectList,
    "school-select": SchoolSelect
  },
  props: {
    type: {
      type: String,
      default: "新增"
    },
    Id: {
      type: String,
      default: ""
    },
    OrganizationId: {
      type: String,
      default: ""
    }
  },
  methods: {
    //修改数据源数据
    customgetSelectDate() {
      let that = this;
      if (that.form.ORGANIZATION.length > 0) {
        that.form.ORGANIZATION_NAME =
          that.form.ORGANIZATION[0].ORGANIZATION_NAME;
      }
    },
    onSubmit() {
      // console.log("submit!");
    },
    //选择机构
    selectSuccess(val) {
      this.selectOrganization = false;
      this.form.ORGANIZATION_ID = val.ORGANIZATION_ID;
      this.form.ORGANIZATION_NAME = val.ORGANIZATION_NAME;
    },
    //选择学校
    SelctSchool(val) {
      this.SchoolShow = false;
      this.form.CUSTOM_SCHOOLID = val.SCHOOL_ID;
      this.form.CUSTOM_SCHOOL = val.SCHOOL_NAME;
    },
    //选择 机构
    Choose() {
      this.selectOrganization = true;
    },
    //
    ChooseSchool() {
      this.SchoolShow = true;
    },
    getBodyStyle() {
      // console.log(this.type == "沟通");
      if (this.type == "沟通") {
        return "height:300px; overflow: scroll";
      }
    },
    onAdd() {
      if (this.type == "渠道新增") {
        this.form.ORGANIZATION_ID = this.OrganizationId;
      }
      var f = false;
      this.$refs.form.validate(valid => {
        if (valid) {
          f = true;
        }
      });
      if (!f) {
        this.$notify.error({
          title: "错误",
          message: "请将信息填写完整"
        });
        return;
      }

      let that = this;
      if (this.form.ORGANIZATION_ID == "") {
        this.$notify.error({
          title: "错误",
          message: "请选择渠道"
        });
        return;
      }
      that.form.CUSTOM_ID = getid.getid();
      that.form.ADMIN_ID = sessionStorage.getItem("userId");
      that.form.CUSTOM_ADDTIME = new Date();
      // that.form.CUSTOM_BIRTHDATE=new Date(that.form.CUSTOM_BIRTHDATE);
      // that.form.ADMIN_ID = sessionStorage.getItem("userId");
      // that.form.ORGANIZATION_TIME=new Date();
      // console.log(that.form.ORGANIZATION_TIME);
      if (that.form.CUSTOM_LEVEL == "") {
        that.form.CUSTOM_LEVEL = "五星";
      }
      api.CustomAdd(that, that.form);
    },
    onChange() {
      var f = false;
      this.$refs.form.validate(valid => {
        if (valid) {
          f = true;
        }
      });
      if (!f) {
        this.$notify.error({
          title: "错误",
          message: "请将信息填写完整"
        });
        return;
      }
      let that = this;
      api.CustomChange(that, that.form);
    }
  },
  created() {
    // console.log(this.Id);
    if (this.type == "修改") {
      var data = {
        Id: this.Id
      };
      let that = this;
      api.CustomGet(that, data, function(msg) {
        that.form = msg.Result;
        // that.customgetSelectDate();
      });
    }
  }
};
</script>
<style>
.input_larger .el-input__inner {
  width: 100% !important;
}
</style>

